<html>
  <head>
    <meta charset="UTF-8" />
    <title>spine-pixi</title>
    <script src="https://cdn.jsdelivr.net/npm/pixi.js@8.4.1/dist/pixi.js"></script>
    <script src="../dist/iife/spine-pixi-v8.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/tweakpane@3.1.9/dist/tweakpane.min.js"></script>
    <link rel="stylesheet" href="../../index.css">
    <script src="https://cdn.jsdelivr.net/npm/lil-gui@0.20.0/dist/lil-gui.umd.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/lil-gui@0.20.0/dist/lil-gui.min.css" rel="stylesheet">
  </head>

  <body>
    <script>
      (async function () {
        var app = new PIXI.Application();
        await app.init({
          width: window.innerWidth,
          height: window.innerHeight,
          resolution: window.devicePixelRatio || 1,
          autoDensity: true,
          resizeTo: window,
          backgroundColor: 0x2c3e50,
          hello: true,
        })
        document.body.appendChild(app.canvas);

        // adding skeleton to cache
        PIXI.Assets.cache.set("jsonSkel", jsonSkel);

        // adding texture atlas to cache and loading the respective texture page
        const textureAtlas = new spine.TextureAtlas(txtAtlas);
        const texturePng = await PIXI.Assets.load(slotPng);
        textureAtlas.pages[0].setTexture(spine.SpineTexture.from(texturePng.source));
        PIXI.Assets.cache.set("spineboyAtlas", textureAtlas);

        // creating spine game object
        const spineGO = spine.Spine.from({skeleton: "jsonSkel", atlas: "spineboyAtlas" });
        spineGO.position.set(300, 300);
        app.stage.addChild(spineGO);

        // creating slot object
        const container = new PIXI.Container();
        const sprite = await PIXI.Sprite.from(texturePng);
        sprite.anchor.x = 0.5;
        sprite.anchor.y = 0.5;
        sprite.tint = 0x00ff00
        container.addChild(sprite);
        spineGO.addSlotObject("replaceMe", container);

        // adding controls
        const parentBone = spineGO.skeleton.findBone("pivot");
        const parent2Bone = spineGO.skeleton.findBone("pivot2");
        const bone = spineGO.skeleton.findBone("replaceMe");

        const myObject = {
          parentScaleX: 1,  parentScaleY: 1,  parentRotation: 0,
          parent2ScaleX: 1, parent2ScaleY: 1, parent2Rotation: 0,
          scaleX: 1,        scaleY: 1,        rotation: 0,
        };

        const gui = new lil.GUI({});
        gui.add(myObject, 'parentScaleX').min(-3).max(3).step(0.1).name('parentScaleX').onChange(value => parentBone.scaleX = value);
        gui.add(myObject, 'parentScaleY').min(-3).max(3).step(0.1).name('parentScaleY').onChange(value => parentBone.scaleY = value);
        gui.add(myObject, 'parentRotation').min(-180).max(180).step(1).name('parentRotation').onChange(value => parentBone.rotation = value);
        gui.add(myObject, 'parent2ScaleX').min(-3).max(3).step(0.1).name('parent2ScaleX').onChange(value => parent2Bone.scaleX = value);
        gui.add(myObject, 'parent2ScaleY').min(-3).max(3).step(0.1).name('parent2ScaleY').onChange(value => parent2Bone.scaleY = value);
        gui.add(myObject, 'parent2Rotation').min(-180).max(180).step(1).name('parent2Rotation').onChange(value => parent2Bone.rotation = value);
        gui.add(myObject, 'scaleX').min(-3).max(3).step(0.1).name('scaleX').onChange(value => bone.scaleX = value);
        gui.add(myObject, 'scaleY').min(-3).max(3).step(0.1).name('scaleY').onChange(value => bone.scaleY = value);
        gui.add(myObject, 'rotation').min(-180).max(180).step(1).name('rotation').onChange(value => bone.rotation = value);

        // add instructions
        const basicText = new PIXI.Text({
          text: "This example shows that slot objects follow scale and rotation from ancestors too, but if a rotation on a bone occurs scale won't work anymore on ancestors.",
          style: { fontSize: 20, fill: "white", wordWrap: true, wordWrapWidth: 300 }
        });
        basicText.position.set(10, 10);
        basicText.anchor.set(0, 0);
        app.stage.addChild(basicText);
      })();

      const jsonSkel = {
        "bones": [
          { "name": "root" },
          { "name": "pivot", "parent": "root",
            "scaleX": 1,
            "scaleY": 1,
            "rotation": 0,
            "x": 20,
            "y": -20
          },
          {
            "name": "pivot2", "parent": "pivot",
            "scaleX": 1,
            "scaleY": 1,
            "rotation": 0,
            "x": 20,
            "y": -20
          },
          {
            "name": "replaceMe", "parent": "pivot2",
            "scaleX": 1,
            "scaleY": 1,
            "rotation": 0,
            "x": 20,
            "y": -20
          }
        ],
        "slots": [{ "name": "replaceMe", "bone": "replaceMe", "attachment": "image" }],
        "skins": [{ "name": "default", "attachments": { "replaceMe": { "image": { "width": 100, "height": 100 } } }}],
        "animations": { "animation": {} }
      }

      const txtAtlas =
`skeleton.png
size:100,100
filter:Linear,Linear
image
bounds:0,0,100,100`;

      const slotPng = ""
    </script>

  </body>
</html>